<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React生命周期</title>
</head>
<body>
    <div id="test"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>

    <script type="text/babel">
        class Count extends React.Component{
            constructor(props) {
                console.log("constructor")
                super(props)
            }
            state = {count: 0}
            handleAdd = () => {
                const {count} = this.state
                this.setState({
                    count: count + 1
                })
            }
           
            death() {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            // 强制更新
            force = () => {
                this.forceUpdate()
            }
            componentWillMount() {
                console.log("componentWillMount")
            }
            componentDidMount() {
                console.log("componentDidmount")
            }
            shouldComponentUpdate() {
                console.log("shouldComponentUpdate")
                return true
            }

            componentWillUpdate(){
                console.log("componentWillUpdate")
            }

            componentDidUpdate() {
                console.log("componentDidUpdate")
            }

            componentWillUnmount() {
                console.log('componentDidUmount')
            }
            render() {
                console.log("render")
                const { count } = this.state
                return (
                    <div>
                        <h2>当前求和为: {count}</h2>
                        <button onClick={this.handleAdd}>点我+1</button>    
                        <button onClick={this.death}>卸载组件</button>    
                        <button onClick={this.force}>不更新状态，强制更新</button>    
                    </div>
                )
            }
        }
        class A extends React.Component{
            // 初始化状态
            state = {carName: '奔驰'}
            changeCar = () => {
                this.setState({carName: '奥拓'})
            }
            render() {
                const { carName } = this.state
                return (
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName}/>
                    </div>
                )
            }
        }
        class B extends React.Component{
            componentDidMount() {
                console.log("componentDidMount")
            }
            componentWillReceiveProps(props) {
                // 第一次传的不算
                console.log("componentWillReceiveProps",props)
            }

            render() {
                return (
                    <div>我是B组件，接收到的车是{this.props.carName}</div>
                )
            }
        }
        ReactDOM.render(<A />, document.getElementById('test'))
    </script>
</body>
</html>